<template>
  <Navbar2></Navbar2>
  <a-layout-content style="padding: 70px 50px">

    <BreadCrumbShow :navgation-index="3"></BreadCrumbShow>
    <div :style="{ background: '#fff', padding: '24px', minHeight: '880px' }">
      <a-layout>
        <a-row>
          <a-col :span="18">
            <PgHeader page-title="Dashboard"></PgHeader>
            <a-layout-content class="contentStyle">
              <div id="chart" style="width:100%;min-height:200px">
              </div>
            </a-layout-content>

          </a-col>
          <a-col :span="6" style="float: right">
            <PgHeader page-title="Detail"></PgHeader>
<!--            <a-layout-header class="headerStyle">Header</a-layout-header>-->
            <a-layout-content class="contentStyle">123</a-layout-content>
          </a-col>
        </a-row>

        <a-row>

          <a-col :span="12" style="padding-top: 30px">
            <PgHeader page-title="Tasks"></PgHeader>
            <a-layout-content class="contentStyle" style="padding-top: 20px">
              <a-space wrap>
                <span @click="$router.push('/issueList?status=1')" class="status status-blue cursor-pointer"><span class="status-dot status-dot-animated"></span>新建</span>
                <span @click="$router.push('/issueList?status=2')" class="status status-azure cursor-pointer"><span class="status-dot status-dot-animated"></span>处理中</span>
                <span @click="$router.push('/issueList?status=3')" class="status status-green cursor-pointer"><span class="status-dot status-dot-animated"></span>重新打开</span>
                <span @click="$router.push('/issueList?status=4')" class="status status-red cursor-pointer"><span class="status-dot status-dot-animated"></span>待反馈</span>
              </a-space>
              <br>
              <a-space wrap style="padding-top:20px">

                <span @click="$router.push('/issueList?status=5')" class="status status-cyan cursor-pointer"><span class="status-dot"></span>已解决</span>
                <span @click="$router.push('/issueList?status=6')" class="status status-dark cursor-pointer"><span class="status-dot"></span>已忽略</span>
                <span @click="$router.push('/issueList?status=7')" class="status gray-900 cursor-pointer"><span class="status-dot"></span>已关闭</span>

              </a-space>
            </a-layout-content>
          </a-col>

          <a-col :span="12" style="padding-top: 30px">
            <PgHeader page-title="Project Members"></PgHeader>
            <a-layout-content class="contentStyle">

            </a-layout-content>
          </a-col>

          <a-col :span="24" style="padding-top: 30px;padding-bottom:10%">
            <PgHeader page-title="Project Activity"></PgHeader>
            <a-layout-content class="contentStyle" style="word-wrap:break-word;word-break:break-all;height: 300px;min-height: 100vh;display: block;overflow-y: scroll;">
              <!--                        1 insert here-->
              <div class="page-body" >
                <div class="container-xl">
                  <div class="row justify-content-center">
                    <div class="col-8">
                      <div class="card">
                        <div class="card-body">
                          <div class="divide-y">
                            <div>
                              <div class="row">
                                <div class="col-auto">
                                  <span class="avatar">JL</span>
                                </div>
                                <div class="col">
                                  <div class="text-truncate">
                                    <strong>Jeffie Lewzey</strong> commented on your <strong>"I'm not a witch."</strong> post.
                                  </div>
                                  <div class="text-muted">yesterday</div>
                                </div>
                                <div class="col-auto align-self-center">
                                  <div class="badge bg-primary"></div>
                                </div>
                              </div>
                            </div>
                            <div>
                              <div class="row">
                                <div class="col-auto">
                                  <span class="avatar" style="background-image: url(./static/avatars/002m.jpg)"></span>
                                </div>
                                <div class="col">
                                  <div class="text-truncate">
                                    It's <strong>Mallory Hulme</strong>'s birthday. Wish him well!
                                  </div>
                                  <div class="text-muted">2 days ago</div>
                                </div>
                                <div class="col-auto align-self-center">
                                  <div class="badge bg-primary"></div>
                                </div>
                              </div>
                            </div>
                            <div>
                              <div class="row">
                                <div class="col-auto">
                                  <span class="avatar" style="background-image: url(./static/avatars/003m.jpg)"></span>
                                </div>
                                <div class="col">
                                  <div class="text-truncate">
                                    <strong>Dunn Slane</strong> posted <strong>"Well, what do you want?"</strong>.
                                  </div>
                                  <div class="text-muted">today</div>
                                </div>
                                <div class="col-auto align-self-center">
                                  <div class="badge bg-primary"></div>
                                </div>
                              </div>
                            </div>
                            <div>
                              <div class="row">
                                <div class="col-auto">
                                  <span class="avatar" style="background-image: url(./static/avatars/000f.jpg)"></span>
                                </div>
                                <div class="col">
                                  <div class="text-truncate">
                                    <strong>Emmy Levet</strong> created a new project <strong>Morning alarm clock</strong>.
                                  </div>
                                  <div class="text-muted">4 days ago</div>
                                </div>
                                <div class="col-auto align-self-center">
                                  <div class="badge bg-primary"></div>
                                </div>
                              </div>
                            </div>
                            <div>
                              <div class="row">
                                <div class="col-auto">
                                  <span class="avatar" style="background-image: url(./static/avatars/001f.jpg)"></span>
                                </div>
                                <div class="col">
                                  <div class="text-truncate">
                                    <strong>Maryjo Lebarree</strong> liked your photo.
                                  </div>
                                  <div class="text-muted">2 days ago</div>
                                </div>
                              </div>
                            </div>
                            <div>
                              <div class="row">
                                <div class="col-auto">
                                  <span class="avatar">EP</span>
                                </div>
                                <div class="col">
                                  <div class="text-truncate">
                                    <strong>Egan Poetz</strong> registered new client as <strong>Trilia</strong>.
                                  </div>
                                  <div class="text-muted">yesterday</div>
                                </div>
                              </div>
                            </div>
                            <div>
                              <div class="row">
                                <div class="col-auto">
                                  <span class="avatar" style="background-image: url(./static/avatars/002f.jpg)"></span>
                                </div>
                                <div class="col">
                                  <div class="text-truncate">
                                    <strong>Kellie Skingley</strong> closed a new deal on project <strong>Pen Pineapple Apple Pen</strong>.
                                  </div>
                                  <div class="text-muted">2 days ago</div>
                                </div>
                              </div>
                            </div>
                            <div>
                              <div class="row">
                                <div class="col-auto">
                                  <span class="avatar" style="background-image: url(./static/avatars/003f.jpg)"></span>
                                </div>
                                <div class="col">
                                  <div class="text-truncate">
                                    <strong>Christabel Charlwood</strong> created a new project for <strong>Wikibox</strong>.
                                  </div>
                                  <div class="text-muted">4 days ago</div>
                                </div>
                              </div>
                            </div>
                            <div>
                              <div class="row">
                                <div class="col-auto">
                                  <span class="avatar">HS</span>
                                </div>
                                <div class="col">
                                  <div class="text-truncate">
                                    <strong>Haskel Shelper</strong> change status of <strong>Tabler Icons</strong> from <strong>open</strong> to <strong>closed</strong>.
                                  </div>
                                  <div class="text-muted">today</div>
                                </div>
                              </div>
                            </div>
                            <div>
                              <div class="row">
                                <div class="col-auto">
                                  <span class="avatar" style="background-image: url(./static/avatars/006m.jpg)"></span>
                                </div>
                                <div class="col">
                                  <div class="text-truncate">
                                    <strong>Lorry Mion</strong> liked <strong>Tabler UI Kit</strong>.
                                  </div>
                                  <div class="text-muted">yesterday</div>
                                </div>
                              </div>
                            </div>
                            <div>
                              <div class="row">
                                <div class="col-auto">
                                  <span class="avatar" style="background-image: url(./static/avatars/004f.jpg)"></span>
                                </div>
                                <div class="col">
                                  <div class="text-truncate">
                                    <strong>Leesa Beaty</strong> posted new video.
                                  </div>
                                  <div class="text-muted">2 days ago</div>
                                </div>
                              </div>
                            </div>
                            <div>
                              <div class="row">
                                <div class="col-auto">
                                  <span class="avatar" style="background-image: url(./static/avatars/007m.jpg)"></span>
                                </div>
                                <div class="col">
                                  <div class="text-truncate">
                                    <strong>Perren Keemar</strong> and 3 others followed you.
                                  </div>
                                  <div class="text-muted">2 days ago</div>
                                </div>
                              </div>
                            </div>
                            <div>
                              <div class="row">
                                <div class="col-auto">
                                  <span class="avatar">SA</span>
                                </div>
                                <div class="col">
                                  <div class="text-truncate">
                                    <strong>Sunny Airey</strong> upload 3 new photos to category <strong>Inspirations</strong>.
                                  </div>
                                  <div class="text-muted">2 days ago</div>
                                </div>
                              </div>
                            </div>
                            <div>
                              <div class="row">
                                <div class="col-auto">
                                  <span class="avatar" style="background-image: url(./static/avatars/009m.jpg)"></span>
                                </div>
                                <div class="col">
                                  <div class="text-truncate">
                                    <strong>Geoffry Flaunders</strong> made a <strong>$10</strong> donation.
                                  </div>
                                  <div class="text-muted">2 days ago</div>
                                </div>
                              </div>
                            </div>
                            <div>
                              <div class="row">
                                <div class="col-auto">
                                  <span class="avatar" style="background-image: url(./static/avatars/010m.jpg)"></span>
                                </div>
                                <div class="col">
                                  <div class="text-truncate">
                                    <strong>Thatcher Keel</strong> created a profile.
                                  </div>
                                  <div class="text-muted">3 days ago</div>
                                </div>
                              </div>
                            </div>
                            <div>
                              <div class="row">
                                <div class="col-auto">
                                  <span class="avatar" style="background-image: url(./static/avatars/005f.jpg)"></span>
                                </div>
                                <div class="col">
                                  <div class="text-truncate">
                                    <strong>Dyann Escala</strong> hosted the event <strong>Tabler UI Birthday</strong>.
                                  </div>
                                  <div class="text-muted">4 days ago</div>
                                </div>
                              </div>
                            </div>
                            <div>
                              <div class="row">
                                <div class="col-auto">
                                  <span class="avatar" style="background-image: url(./static/avatars/006f.jpg)"></span>
                                </div>
                                <div class="col">
                                  <div class="text-truncate">
                                    <strong>Avivah Mugleston</strong> mentioned you on <strong>Best of 2020</strong>.
                                  </div>
                                  <div class="text-muted">2 days ago</div>
                                </div>
                              </div>
                            </div>
                            <div>
                              <div class="row">
                                <div class="col-auto">
                                  <span class="avatar">AA</span>
                                </div>
                                <div class="col">
                                  <div class="text-truncate">
                                    <strong>Arlie Armstead</strong> sent a Review Request to <strong>Amanda Blake</strong>.
                                  </div>
                                  <div class="text-muted">2 days ago</div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </a-layout-content>
          </a-col>

          <!--          <a-col :span="9" style="padding-top: 30px">-->
          <!--            <a-list-->
          <!--                class="demo-loadmore-list"-->
          <!--                :loading="true"-->
          <!--                item-layout="horizontal"-->
          <!--                :data-source="[{'name':'zhang3'},{'name':'li4'}]"-->
          <!--            >-->
          <!--              <template #loadMore>-->
          <!--                <div-->
          <!--                    v-if="!initLoading && !loading"-->
          <!--                    :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }"-->
          <!--                >-->
          <!--                  <a-button @click="onLoadMore">loading more</a-button>-->
          <!--                </div>-->
          <!--              </template>-->
          <!--              <template #renderItem="{ item }">-->
          <!--                <a-list-item>-->
          <!--                  <template #actions>-->
          <!--                    <a key="list-loadmore-edit">edit</a>-->
          <!--                    <a key="list-loadmore-more">more</a>-->
          <!--                  </template>-->
          <!--                  <a-skeleton avatar :title="false" :loading="!!item.loading" active>-->
          <!--                    <a-list-item-meta-->
          <!--                        description="Ant Design, a design language for background applications, is refined by Ant UED Team"-->
          <!--                    >-->
          <!--                      <template #title>-->
          <!--                        <a href="https://www.antdv.com/">{{ item.name.last }}</a>-->
          <!--                      </template>-->
          <!--                      <template #avatar>-->
          <!--                        <a-avatar :src="item.picture.large" />-->
          <!--                      </template>-->
          <!--                    </a-list-item-meta>-->
          <!--                    <div>content</div>-->
          <!--                  </a-skeleton>-->
          <!--                </a-list-item>-->
          <!--              </template>-->
          <!--            </a-list>-->
          <!--          </a-col>-->

          <a-col :span="6" style="padding-top: 30px">
          </a-col>
        </a-row>

        <!--        <a-layout-footer class="footerStyle">Footer</a-layout-footer>-->
      </a-layout>

    </div>
  </a-layout-content>

</template>

<script>
// import layui from '/src/assets/layui/layui'
import * as echarts from 'echarts';
import {markRaw} from "vue";
import Navbar2 from "@/views/components/Navbar2.vue";
import {mapActions, mapGetters} from "vuex";
import {projDetail, projDetailVo} from "@/api/dashboard.js";
import BreadCrumbShow from "@/views/components/BreadCrumbShow.vue";
import PgHeader from "@/views/components/PgHeader.vue";

export default {
  name: "Dashboard",
  components: {PgHeader, BreadCrumbShow, Navbar2},
  data() {
    return {
      detail: null,
      chartInstance: null,
      countsMap: null,
      countsMapFmt:[],
      chartOptionItem: {
        name: '',
        type: 'bar',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: [0, 0, 0, 0, 0, 0, 0]
      },
      yNames: ['已关闭', '已忽略', '已解决', '待反馈', '重新打开', '处理中', '新建'],
      countsMapFinal:[
        {
          name: '任务',
          type: 'bar',
          stack: 'total',
          label: {
            show: true
          },
          emphasis: {
            focus: 'series'
          },
          data: [0, 0, 0, 0, 0, 0, 0]
        },
        {
          name: '功能',
          type: 'bar',
          stack: 'total',
          label: {
            show: true
          },
          emphasis: {
            focus: 'series'
          },
          data: [0, 0, 0, 0, 0, 0, 0]
        },
        {
          name: 'Bug',
          type: 'bar',
          stack: 'total',
          label: {
            show: true
          },
          emphasis: {
            focus: 'series'
          },
          data: [0, 0, 0, 0, 0, 0, 0]
        },
        {
          name: '需求确认',
          type: 'bar',
          stack: 'total',
          label: {
            show: true
          },
          emphasis: {
            focus: 'series'
          },
          data: [0, 0, 0, 0, 0, 0, 0]
        },
      ],
      chartsOption:{
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // Use axis to trigger tooltip
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          data: []
        },
        series:[]
      },
    }
  },
  methods: {
    async queryProjDetail(pid) {
      console.log('queryProjDetail:',pid)
      let result = await projDetailVo(pid);
      console.log('queryProjDetail result:',result)
      if (result.data.code == 200) {
        this.detail = result.data.data
        console.log('result.data.data.issueTypePairs:',result.data.data.issueTypePairs)
        let issueTypePairs = result.data.data.issueTypePairs

        if(issueTypePairs){
          console.log('issueTypePairs:',issueTypePairs)
          this.chartInstance.showLoading();
          let countsMapLocal = []
          for(let i=0;i<issueTypePairs.length;i++){
            let chartOptionItemMeta = Object.assign({}, this.chartOptionItem);
            console.log('issueTypePairs[i].typeName:',issueTypePairs[i].typeName)
            console.log('issueTypePairs[i].counts:',issueTypePairs[i].counts)
            chartOptionItemMeta.name = issueTypePairs[i].typeName
            chartOptionItemMeta.data = issueTypePairs[i].counts
            console.log('chartOptionItemMeta:',chartOptionItemMeta)
            countsMapLocal.push(chartOptionItemMeta)
          }
          console.log('countsMapLocal-1:',countsMapLocal)
          // if(countsMapLocal.length < this.countsMapFinal.length){
          //   for(let i=countsMapLocal.length;i<this.countsMapFinal.length;i++){
          //     countsMapLocal.push(this.countsMapFinal[i])
          //   }
          // }
          // console.log('countsMapLocal-2:',countsMapLocal)
          this.countsMapFinal = countsMapLocal
          this.chartsOption.series = this.countsMapFinal
          this.chartInstance.setOption(this.chartsOption);
          this.chartInstance.hideLoading();
        }
      }
      console.log('proj detail name:', this.detail.name)
    },
    ...mapActions([
      'navigationChange',
        'projectChange',
        'goDashboardBread'
    ])
  },
  created() {
    console.log('pid dashboard:', this.$route.query.pid);


    this.navigationChange('3')
  },
  mounted() {
    this.queryProjDetail(this.$route.query.pid)
    // 获取容器元素
    const container = document.getElementById('chart');
    // 初始化图表
    this.chartInstance = markRaw(echarts.init(container));
    this.chartInstance.showLoading();
    this.chartsOption.yAxis.data=this.yNames
    // 设置配置项和数据
    const option = this.chartsOption
    this.chartInstance.setOption(option);
    this.chartInstance.hideLoading();

    this.chartInstance.on('legendselectchanged', function (e) {
      if (e.selected[e.name]) {
        // 点击项是选中状态
        console.log(e.name + ' checked')
        // sendFreshMainEchartLegendTriggerVal(e.selected)
      } else {
        // 点击项是取消状态
        console.log(e.name + ' un checked')
        // sendFreshMainEchartLegendTriggerVal(e.selected)
      }
      // do something
    });
  },
  beforeDestroy() {
    if (this.chartInstance) {
      // 清除图表实例及相关事件监听等
      this.chartInstance.dispose();
    }
  },
  computed:{
    ...mapGetters([
      'current_pid',
    ])
  },
  watch: {
    countsMapFinal: function (val) {
      console.log('watch countsMapFinal change size:', val.length)
      if (val) {
        this.data = val
      }
    },
    yNames:function (val) {
      console.log('watch yNames change size:', val.length)
      if (val) {
        this.data = val
      }
    },
  },

}
</script>

<style scoped>
.headerStyle {
  textAlign: 'center';
  /*color: '#fff';*/
  height: 50px;
  paddingInline: 50;
  lineHeight: '64px';
  /*background-color: blue;*/
  background-color: grey;
}

.contentStyle {
  textAlign: 'center';
  minHeight: 120px;
  lineHeight: '120px';
  /*color: '#fff';*/
  /*backgroundColor: '#108ee9';*/
}

.siderStyle {
  textAlign: 'center';
  lineHeight: '120px';
  /*color: '#fff';*/
  /*backgroundColor: '#3ba0e9';*/
}

.footerStyle {
  textAlign: 'center';
  /*color: '#fff';*/
  /*backgroundColor: '#7dbcea';*/
}


/*@import "src/assets/styles/manage.css";*/
.navbar-av {
  border-radius: 0;
}

.error-msg {
  color: red;
  position: absolute;
  font-size: 13px;
}

.demo-loadmore-list {
  min-height: 350px;
}
</style>
